<template>
  <div>
    <div class="fadeShow" @click="fadeShow = false" v-show="fadeShow" @touchmove.prevent></div>
    <div class="head-top" v-show="isHeader" @touchmove.prevent>
      <mt-header title="图书">
        <mt-button icon="back" slot="left" @click='back'></mt-button>
      </mt-header>
    </div>
    <div class="content" :style="{fontSize:rangeValue+'px'}" @click="isHeadFoote" v-html="content"></div>
    <div :class="['list',fadeShow?'list-open':'']">
      <p  v-for="(item,index) in list" :key="index" @click="goToList(index)">{{item.title}}</p>
    </div>
    <div class="footer">
        <div id="changSize" style="height:50px;line-height:50px;" v-if="touchFontActive">
          <mt-range v-model="rangeValue" :min="15" :max="25" :step="2" :bar-height="5">
            <div slot="start" class="default_size">A</div>
            <div slot="end" class="big_size">A</div>
          </mt-range>
        </div>
        <div class="tabbar" v-show="isHeader" @touchmove.prevent>
          <a href="javascript:;" class="tab-box" @click="openList">
            <div class="item-icon">
              <img src="static/book/menu.png" alt="">
          </div>
              <div class="text">目录</div>
          </a>
          <a href="javascript:;" class="tab-box" @click="prePage">
            <div class="item-icon">
              <img src="static/book/left.png" alt="">
          </div>
              <div class="text">上一页</div>
          </a>
          <a href="javascript:;" class="tab-box" @click="nextPage">
            <div class="item-icon">
              <img src="static/book/right.png" alt="">
          </div>
              <div class="text">下一页</div>
          </a>
          <a href="javascript:;" class="tab-box">
            <div class="item-icon">
              <img src="static/book/font.png" alt="" @click="changeSize">
          </div>
              <div class="text">字体</div>
          </a>
        </div>
      </div>
    </div>
</template>

<script>
import baseurl from "@/api/baseurl.js";
export default {
  data() {
    return {
      rangeValue: 15,
      setcolor: {
        color: "#000",
        bGcolor: "#f9f4e9",
        text: "日间"
      },
      touchFontActive: false,
      progressShow: false,
      //内容
      content: "",
      isHeader: true,
      list: [],
      fadeShow: false,
      epubUrl: "",
      page: 0
    };
  },
  computed: {},
  created() {
    this.title = this.$route.params.title;
    this.epubUrl = this.$route.params.bookurl.replace("http://180.97.46.193/","");
  },
  watch: {
    rangeValue(newSize,oldSize){
    }
  },
  methods: {
    /**
     * 回到顶部
     */
    toTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      console.log("回到顶部");
    },
    /**
     * 点击目录进入内容
     */
    goToList(e) {
      console.log(e);
      this.page = e;
      this.toTop();
      this.defaultContent(this.page);
      this.fadeShow = false;
    },
    onScroll(e) {
      console.log(e);
    },
    /**
     * 打开目录
     */
    openList() {
      this.fadeShow = !this.fadeShow;
      this.touchFontActive = false;
    },
    /**
     * 点击屏幕隐藏头部尾部
     */
    isHeadFoote() {
      this.isHeader = !this.isHeader;
      this.touchFontActive = false;


    },
    /**
     * 上一页
     */
    prePage() {
      if(this.page <=0){
        return;
      }else{
        this.page--;
        console.log(this.page);
        this.defaultContent(this.page);
        this.toTop();
      }
    },
    /**
     * 下一页
     */
    nextPage() {
      if(this.page > this.list.length - 2){
        return;
      }else{
        this.page++;
        console.log(this.page);
        this.defaultContent(this.page);
        this.toTop();
      }
     
    },
    /**
     * 改变字体
     */
    changeSize(){
      this.touchFontActive = !this.touchFontActive;
    },
    /**
     * 返回顶部
     */
    toTop() {
      document.documentElement.scrollTop = document.body.scrollTop = 0;
    },
    /**
     * 默认显示
     */
    defaultContent(page) {
      this.content = this.contentList[page];
    },
    /**
     * 初始化
     */
    init() {
      var that = this;
      this.$http({
        method: "post",
        url: baseurl.epubUrl,
        params: {
          bookName: this.title,
          url: this.epubUrl
        }
      })
        .then(response => {
          this.contentList = response.data.date;
          this.list = response.data.spg.tocReferences;
          this.defaultContent(0);
        })
        .catch(error => {
          console.log(error);
        });
    },
    /**
     * 返回
     */
    back() {
      this.$router.back();
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped>
.fadeShow {
  background: rgba(0, 0, 0, 0.6);
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 9;
  transition: all 0.5s;
}
.content {
  padding: 50px 10px 60px 10px;
  text-align: justify;
  /* overflow-y: scroll; */
  height: calc(100% - 110px);
}
.content p {
  line-height: 1em !important;
}
.list-open {
  width: 300px !important;
  left: 0 !important;
}
.list {
  transition: all 0.2s;
  height: calc(100% - 99px);
  width: 300px;
  top: 44px;
  left: -300px;
  background: #fff;
  position: fixed;
  overflow-y: scroll;
  z-index: 10;
}
.list p {
  line-height: 1.5em;
  padding: 5px;
}
.mt-range {
  line-height: 50px;
  height: 50px;
  width: 95%;
  margin: 0 auto;
}
.mt-range >>> .mt-range-thumb {
  top: 10px;
}
.default_size {
  font-size: 15px;
  padding: 0 5px;
}
.big_size {
  font-size: 25px;
  padding: 0 5px;
}
input.claRange {
  width: 90% !important;
}
.head-top {
  position: fixed;
  width: 100%;
  z-index: 9;
}
a {
  text-decoration: none;
  color: #000000;
}

body {
  display: flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
}
.footer {
  width: 100%;
  background-color: #ffffff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 101;
}

.footer .tabbar {
  padding-top: 5px;
  border-top: 1px solid #efefef;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.footer .tabbar > a {
  width: 25%;
  text-align: center;
  font-size: 12px;
}

.item-icon {
  padding-top: 4px;
}
.item-icon img {
  width: 25px;
  height: 25px;
}
.footer .tabbar > a > .text {
  color: #a1a1a1;
  margin-bottom: 3px;
}
/*进度条样式 */

#controls {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #fff;
}
</style>